<template>
  <div class="content">
    <header>
      <div class="customerName">{{ customerName }}</div>
    </header>
    <!-- <a-button v-if="isShowBtn" @click="clickAnswer">一键答题</a-button> -->
    <loading :isLoading="isLoading" :height="50" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import loading from '../../../components/loading.vue'

let customerName = ref<string>('暂无顾客')
let name = ref<string>('')
let isShowBtn = ref<boolean>(false)
let isLoading = ref<boolean>(false)

// const clickAnswer = () => {
//   window.electron.ipcRenderer.send('click-answer', name.value)
//   isLoading.value = true
// }

onMounted(() => {
  window.electron.ipcRenderer.send('get-customer-name')
  window.electron.ipcRenderer.on('customer-name', (_, data: any) => {
    customerName.value = data
    if (customerName.value == '') customerName.value = '暂无顾客'
  })
  window.electron.ipcRenderer.on('customer-service', (_, list: any) => {
    isShowBtn.value = list.isNeedAnswer
    name.value = list.name
  })
  window.electron.ipcRenderer.on('change-loading', (_, data: boolean) => {
    isLoading.value = data
  })

  const link = document.createElement('link')
  link.rel = 'stylesheet'
  link.href = `./assets/themes/default.css`
  document.head.appendChild(link)
})
</script>
<style lang="scss" scoped>
.content {
  height: calc(100vh - 40px);
  background-color: #f2f2f2;
}
header {
  .customerName {
    padding: 12px 0 0 8px;
  }
}
</style>
